<template>
	<view class="aaaaa">

		<view class="sku">
			<view class="all">
				<view class="title">
					<view class="left">
						<image :src="list.cover_img" mode=""></image>
					</view>
					<view class="right">

						<view>
							{{list.gname}}

						</view>
						<view>
							库存数量:{{list.sort}}
						</view>
						<view class="close" @click="closesku">
							关闭
						</view>

					</view>
				</view>



				<view class="center-c">
					<view class="colorall">
						颜色分类 
					</view>

					<view class="color" :class="{coloractive:skucolor.id==item.id}" @click="colors(item.id)" v-for="item in list.skuList"
					 :key="item.id">
						{{item.color_text}}
					</view>

				</view>
				<view class="service">
					<view class="servicetext">
						特色服务

					</view>
					<view class="serviceon">
						送货上门 [商家赠送]
					</view>
					<view class="serviceon">
						上门安装 [商家赠送]111
					</view>
					<view class="under">
						<text>购买数量</text>
						<view class="number-box">
							<view @click="numunder" class="numbtn">-</view>
							<view class="number">
								{{num}}
							</view>
							<view @click="numon" class="numbtn">+</view>
						</view>
					
					
					</view>
				</view>
				<view class="gang">

				</view>
				
				<view class="btn" @click="gogogo">
					确定

				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import CartApi from '@/api/index/index.js'

	export default {
		name: 'zujian',
		props: ['list'],

		data() {
			return {

				num: '1',
				skucolor: [],
				useinfo: []
			};
		},
		onLoad() {

		},
		created() {
			this.useinfo = uni.getStorageSync('storage_key').data;
			console.log(this.useinfo, '111')
		},
		methods: {
			numunder() {
				if (this.num > 0) {
					this.num--
				}

			},

			numon() {
				this.num++
			},
			gogogo() {
				// if (this.list.type == 1) {
				// 	var shop = {
				// 		skuCode: this.skucolor.sku_code,
				// 		gname: this.list.gname,
				// 		coverImg: this.list.cover_img,
				// 		color_text: this.skucolor.color_text,
				// 		skuId: this.skucolor.id,
				// 		price: this.skucolor.price,
				// 		count: this.num
				// 	};
				// 	var buycart = uni.getStorageSync('leju-buycart');
				// 	if (!buycart) {
				// 		uni.setStorageSync('leju-buycart', [shop]);
				// 	} else {
				// 		console.log(shop)
				// 		buycart.push(shop)
				// 		uni.setStorageSync('leju-buycart', buycart);
				// 	}

				// 	uni.showToast({
				// 		title: '添加购物车成功',
				// 		duration: 2000
				// 	});
				// } else {

				// 	uni.navigateTo({
				// 		url: "/pages/mine/order/detail/index"
				// 	})


				// }

				if (this.num > 0) {
					if (this.skucolor = []) {
						this.skucolor = this.list.skuList[0]
					}
					var params = {
						skuId: this.skucolor.id,
						count: this.num,
						userId: this.useinfo.id
					}
					CartApi.addCart(params).then((res) => {

						uni.showToast({
							title: '添加购物车成功',
							duration: 2000
						});

					})
				} else {
					uni.showToast({
						title: '请选择数量',
						icon: 'none',
						duration: 2000
					});
				}

			},
			closesku() {
				this.$emit('childEvents')
			},
			colors(id) {

				this.skucolor = this.list.skuList.find((item) => item.id == id)
				console.log(this.skucolor, '222')




			}
		},

	}
</script>

<style lang="scss" scoped>
	.aaaaa {
		position: fixed;
		top: 200rpx;
		left: 65rpx;

	}

	.sku {
		width: 628rpx;
		height: 824rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.all {
			width: 550rpx;
			height: 100%;
			margin: 0 auto;
		}

		.title {
			height: 192rpx;
			width: 100%;
			display: flex;
			justify-content: space-around;

			.left {
				width: 192rpx;
				height: 100%;
				background: #fff;
				margin-top: -40rpx;

				image {
					width: 192rpx;
					height: 100%;
				}
			}

			.right {
				width: 374rpx;
				height: 100%;

				position: relative:nth-child(1) {
					font-size: 28rpx;
					margin-top: 90rpx;
					color: #3E3E3E;
					margin-left: 40rpx;
				}

				:nth-child(2) {
					font-size: 24rpx;
					margin-left: 40rpx;
					color: #B0B0B0;
				}

				.close {
					height: 41rpx;
					width: 60rpx;
					position: absolute;
					right: 0;
					background: #354e44;
					font-size: 26rpx;
					color: #FFFFFF;
					top: 30rpx;
					text-align: center;
					border-radius: 10rpx;
				}
			}
		}

		.center-c {
			height: 200rpx;
			width: 100%;

			.colorall {
				height: 40rpx;

			}

			.colorall {
				font-size: 28rpx;
				font-weight: bolder;
				color: #3E3E3E;
			}

			.color {
				margin-top: 15rpx;
				width: 200rpx;
				height: 60rpx;
				float: left;
				margin-right: 40rpx;
				border-radius: 20rpx;
				text-align: center;
				background: #f2f4f3;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #3E3E3E;
			}
		}

		.coloractive {
			margin-top: 15rpx;
			width: 200rpx;
			height: 60rpx;
			float: left;
			margin-right: 40rpx;
			border: 2px #354E44 solid;
			border-radius: 20rpx;
			text-align: center;
			background: #f2f4f3;
			line-height: 60rpx;
			font-size: 26rpx;
			color: #3E3E3E;
		}

		.service {
			height: 200rpx;
			width: 100%;

			.servicetext {
				font-size: 28rpx;
				font-weight: bolder;
				color: #3E3E3E;
			}

			.serviceon {
				border-radius: 20rpx;
				height: 60rpx;
				width: 380rpx;
				text-align: center;
				background: #f2f4f3;
				font-size: 26rpx;
				line-height: 60rpx;
				color: #3E3E3E;
				margin-top: 20rpx;
			}
		}

		.gang {
			width: 100%;
			height: 2rpx;
			
			border-bottom: 1px solid #979797;
			margin-top: 50rpx;
		}

		.under {
			height: 50rpx;
			margin: 0 auto;
			width: 100%;
			display: flex;
			justify-content: space-around;

			.number-box {
				width: 150rpx;
				height: 60rpx;
				display: flex;
				justify-content: space-around;

				.numbtn {
					width: 40rpx;
					font-size: 60rpx;
					line-height: 30rpx;
					text-align: center;
					color: #fff;
					height: 40rpx;
					background: red;


				}
			}
		}

	}

	.btn {
		width: 200rpx;
		height: 80rpx;
		background: #354e44;
		color: #FFFFFF;
		margin: 0 auto;
		font-size: 32rpx;
		margin-top: 30rpx;
		text-align: center;
		border-radius: 30rpx;
		line-height: 80rpx;
	}
</style>
